<template>
  <div class="echarts">
    <div
      :style="{ width: chartWidth, height: chartHeight }"
      class="no-data"
      v-if="this.data.length == 0"
    >
      <span>画图展无数据</span>
    </div>
    <div ref="gauge" :style="{ width: chartWidth, height: chartHeight }"></div>
  </div>
</template>

<script>
import OptionGauge from './../echarts-js/echarts-gauge'
import mixin from './../echarts-js/echarts-mixin'
export default {
  mixins: [mixin],
  props: {
    //设置仪表盘名字:
    setName: {
      type: Function,
      default: (val) => val + '%'
    }
  },
  mounted() {
    this.data.length == 0 ? '' : this.initChart()
  },
  methods: {
    //初始化画图
    initChart() {
      //设置画图对象
      this.myChart = this.$echarts.init(this.$refs.gauge, this.theme)
      //设置OptionGauge对象
      const gauge = new OptionGauge(this.otherOption, this.data, this.showData)
      //调用初始化图像显示函数
      this.initConfig(gauge)

      //开始画图
      this.myChart.setOption(gauge.option)
    },
    initConfig(gauge) {
      //注意事项: 必需：参数是必传参数 可选：参数为可选参数并设定默认值 默认：不需传参数，手动设置 

      //可选配置项
      gauge.setTitleName(gauge.option, this.titleName) //设置图形标题
      gauge.setExportImgBcolor(gauge.option, this.exportImgBcolor) //设置导出图片的背景颜色
      // gauge.setXAxisName(gauge.option, this.xAxisName) //设置x坐标轴的名称
      // gauge.setYAxisName(gauge.option, this.yAxisName) //设置y坐标轴的名称
      gauge.isShowTitle(gauge.option, this.isShowTitle) //是否显示图形标题
      gauge.isShowLegend(gauge.option, this.isShowLegend) //是否显示图形的图列组件
      gauge.isShowTooltip(gauge.option, this.isShowTooltip) //是否显示图形的提示框组件
      gauge.isShowToolbox(gauge.option, this.isShowToolbox) //是否显示图形的工具栏组件
      // gauge.isShowDataZoom(gauge.option, this.isShowDataZoom) //是否显示图形的区域缩放
      gauge.isShowLabel(gauge.option, this.isShowLabel) //是否显示图形的点上方的默认信息

      gauge.setGaugeName(gauge.option, this.setName) //设置画图的标题
      gauge.setSeries(gauge.option, this.mySeries)  //更新series配置的信息

      //默认的配置项
      gauge.isShowXAxis(gauge.option, false) //关闭x轴的显示
      gauge.isShowYAxis(gauge.option, false) //关闭y轴的显示
      gauge.isShowDataZoom(gauge.option, false) //关闭图形的区域缩放
    }
  }
}
</script>

<style>
@import './../echarts-css/index.css';
</style>